<template>
    <div>
        <van-tabs class="component-tabs" v-model="active" color="rgb(206, 153, 64)" :line-width="50" @click="handleClick">
            <van-tab class="tab-view" v-for="(item, key) in options" :key="key">
                <div slot="title" :value="value">{{item}}</div>
            </van-tab>
        </van-tabs>
        <div style="height: 4.3rem;"></div>
    </div>
</template>

<style lang="less">
    .component-tabs{
        padding-top: 0;
        .van-tabs__wrap, .van-tabs__nav{
            height: 4.3rem;
        }
        .van-tab{
            line-height: 1.5rem;
            font-size: 1.4rem;
            padding: 1.4rem 1.2rem;
            flex-basis: 25%;
        }
    }
</style>

<script>

    import {Tab, Tabs} from 'vant';

    export default {
        data() {
            return {
                active: this.value
            }
        },
        props: ['options', 'value'],
        beforeUpdate(){
            this.active = this.value;
        },
        components: {
            [Tab.name]: Tab,
            [Tabs.name]: Tabs,
        },
        methods: {
            handleClick(){
                this.$emit('input', this.active)
                this.$emit('onclick', this.active)
            }
        }
    }
</script>